<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;  
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn1 = document.getElementById("btn1");
            btn1.onclick=function(){
                /*
                    clientWidth
                    clientHeight
                        -这两个属性可以获取元素的可见宽度和高度
                        -这些属性都是不带px的，返回都是一个数字，可以直接进行计算
                        -会获取元素的宽与高 包括内容区和内边距
                        -这些属性都是只读的
                */
               alert(box1.clientWidth);
               alert(box1.clientHeight);
               /*
                    offsetWidth
                    offsetHeight
                        -获取元素的整个宽度和高度，包括内容区、内边距、和边距
               */
               /*
                    offsetParent
                        -可以用来获取当前元素的定位父元素
                        -会获取到当前元素最近的开启了相对定位的祖先元素
                        如果都有没有开启定位，则返回body
               */
            //    var op=box1.offsetParent;
            //    console.log(op);
                /*
                    offsetLeft
                        -当前元素相对于其定位元素的水平偏移量
                    offsetTop
                        -当前元素相对于其定位元素的垂直偏移量
                */
                // alert(box1.offsetLeft);
                /*
                    scrollWidth
                    scrollHeight
                        -可以获取元素整个滚动区域的宽度和高度
                    scrollLeft
                        -可以获得水平滚动条滚动的距离
                    scrollTop
                        -可以获取垂直滚动条滚动的距离
                */
                //当满足scrollHeight-scrollTop == clientHeight  
                //说明滚动条到底了
            };
        };
    </script>
</head>
<body>
    <button id="btn1">点我一下</button>
    <br/><br/>
    <div id="box1"></div>
</body>
</html>